<template>
    <view class="box">
    	<view class="course-list">
    		<view class="cou-item" v-for="(item, i) in curList" :key="i" @click="gocourseDetails(item.id)">
				<view class="cou-image" v-if="!item.picture">
					<image src="/static/campus/tj-bg.png" mode="aspectFill"></image>
					<view class="cou-image-title" v-if="item.name">
						<text>{{item.name.length>=8 ? item.name.slice(0, parseInt(item.name.length/2)) : item.name}}</text>
						<text v-if="item.name.length>=8">{{item.name.slice(parseInt(item.name.length/2))}}</text>
					</view>
				</view>
				<image v-else class="cou-image" :src="api.xiaodeObsUrl+item.picture" mode="aspectFill"></image>
    			<view class="right">
    				<view class="cou-title"><text>{{item.name}}</text></view>
    				<text class="cou-tag" :style="{background: utils.tagBgColor(label)}" v-for="(label, Linx) in labelHandle(item.labels)" :key="Linx">{{label}}</text>
    				<view class="cou-name-num">
    					<text>{{item.teacherName}}</text>
    					<!-- <text>已学80%</text> -->
    				</view>
    			</view>
    		</view>
    	</view>
    	<view class="no-more">
			<uni-load-more :status="loadMore" :content-text="contentText"></uni-load-more>
    	</view>
    </view>
</template>
<script>
export default {
    data() {
        return {
			tagColor: ['#FF6010', '#FF8F1F', '#00B578', '#1677FF'],
			curList: [],
			curPage: 1,
			loadMore: 'more',
			contentText: {
				contentdown: ' ',
				contentrefresh: ' ',
				contentnomore: '- 没有更多了 -'
			},
        }
    },
    props: {
		onReachBottom: { // 监听页面执行触发最底部
			type: Number,
			default: 0
		},
		studentId: { // 用户id
			type: String,
			default: ''
		}
    },
    watch: {
        onReachBottom(val){
			if(this.loadMore == 'no-more') {
                return
            }
            this.curPage ++
            this.getMyCurriculum()
		},
    },
	mounted(){
		this.getMyCurriculum()
	},
	methods: {
		// 标签处理
		labelHandle(str){
			if(!str)return
			if(str.indexOf(';')!=-1){
				return str.split(';')
			}
			if(str.indexOf('；')!=-1){
				return str.split('；')
			}
			
			return [str]
		},
		// 我学习过的课程（只要进入过课程的就算）
		getMyCurriculum(){
			this.loadMore = 'loading'
			this.api.get('happy/getMyCurriculum', {
				studentId: this.studentId,
				page: this.curPage,
				limit: 10
			}).then(res=>{
				if(res.data.state!='ok') return
                let cPage = res.data.cPage
				let list = cPage.list;
				if(cPage.totalPage <= this.curPage){
					this.loadMore = 'no-more'
				}
				this.curList = this.curList.concat(list)
			})
		},
		gocourseDetails(id){
			uni.navigateTo({
				url: '/pages/recommend/course-details?id='+id
			})
		}
	}
}
</script>
<style lang="less" scoped>
	page{
		background-color: #F9F9F9!important;
	}
	.box{
		
	}
	.course-list{
		padding: 0 0 16rpx;
		
	}
	.cou-item{
		display: flex;
		border-bottom: 1rpx solid #EEEEEE;
		// margin-bottom: 24rpx;
		padding: 24rpx;
		background-color: #fff;
		image{
			width: 216rpx;
			height: 136rpx;
			border-radius: 20rpx;
		}
		.right{
			width: calc(100% - 240rpx);
		}
		&:last-child{
			border: none;
			margin-bottom: 0;
		}
	}
	.cou-image{
		position: relative;
		margin-right: 24rpx;
	}
	.cou-image-title{
		position: absolute;
		top: 44rpx;
		width: 100%;
		line-height: 26rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 24rpx;
		font-weight: 600;
	}
	.cou-title{
		font-size: 30rpx;
		color: #333;
		margin-bottom: 10rpx;
	}
	.cou-tag{
		margin-right: 24rpx;
		font-size: 22rpx;
		background-color: #FF6010;
		border-radius: 8rpx;
		padding: 4rpx 8rpx;
		color: #fff;
	}
	.cou-name-num{
		margin-top: 17rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #999999;
	}
	.no-more{
		padding: 24rpx;
		color: #BFBFBF;
		text-align: center;
	}
</style>